<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>58mm 收银小票</title>
    <style>
        @media print {
            @page {
                margin: 0;
            }
            body {
                width: 58mm;
                padding: 5px;
                font-size: 15px;
            }

            .receipt {
                text-align: center;
            }

            .store-name {
                font-size: 16px;
                font-weight: bold;
            }

            .order-info,
            .item,
            .total,
            .footer {
                text-align: left;
                margin-top: 5px;
            }

            .item-header,
            .item {
                display: flex;
                justify-content: space-between;
            }

            .total {
                font-weight: bold;
            }

            .footer {
                text-align: center;
                margin-top: 10px;
            }
    </style>
</head>

<body>
    <div class="receipt">
        <div class="store-name">某某商店</div>
        <div class="order-info">
            订单号: 123456789<br>
            日期: 2025-03-25 14:35:22
        </div>
        <hr>
        <div class="item-header">
            <span>商品</span>
            <span>数量</span>
            <span>单价</span>
            <span>总价</span>
        </div>
        <hr>
        <div class="item">
            <span>苹果</span>
            <span>2</span>
            <span>5.00</span>
            <span>10.00</span>
        </div>
        <div class="item">
            <span>香蕉</span>
            <span>3</span>
            <span>2.00</span>
            <span>6.00</span>
        </div>
        <hr>
        <div class="total">
            合计: 16.00 元
        </div>
        <div class="total">
            支付方式: 微信支付
        </div>
        <hr>
        <div class="footer">
            感谢您的光临！
        </div>
    </div>
</body>

</html>